<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane :label="title" name="tab-0">
      <div class="edit-handles-con">
        <el-collapse v-model="eventTabs">
          <el-collapse-item title="通用属性" name="cmmmon">
            <el-form class="margin-bottom-10">
              <input-normal label="组件类型" v-model="componentData.type" disabled="disabled"></input-normal>
              <input-normal label="组件id" v-model="componentData.id"></input-normal>
              <switch-normal v-model="commonAttr.isVisible" label="可见" @change="onChangeAttr"></switch-normal>
              <dropdown-normal label="定位类型" :valLists="POSITION_TYPES" v-model="commonAttr.positionType" @change="onChangeAttr"></dropdown-normal>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="3d组件属性" name="comp">
            <el-form>
              <el-divider content-position="center">共有属性</el-divider>
              <input-normal label="设计宽度" v-model="commonAttr.designWidth" @change="onChangeAttr"></input-normal>
              <input-normal label="设计高度" v-model="commonAttr.designHeight" @change="onChangeAttr"></input-normal>
              <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
            </el-form>
            <slot></slot>
          </el-collapse-item>
          <right-position></right-position>
        </el-collapse>
      </div>
    </el-tab-pane>
    <el-tab-pane label="动画" name="tab-1">
      <div class="edit-handles-con">
        <right-animate></right-animate>
      </div>
    </el-tab-pane>
    <el-tab-pane label="事件" name="tab-2">
      <div class="edit-handles-con">
        <right-events></right-events>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import RightEvents from '@/views/child/right/right-events.vue'
import RightPosition from '@/views/child/right/right-position.vue'
import RightAnimate from '@/views/child/right/right-animate.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import ColorNormal from '@/views/components/edit/ColorNormal.vue'

import { canvasUtils } from '@/views/js/canvas-utils'

export default {
  name: 'RightPhaserTemplate',
  mixins: [canvasUtils],
  components: {
    RightEvents,
    RightPosition,
    RightAnimate,
    InputNormal,
    DropdownNormal,
    SwitchNormal,
    ColorNormal,
    SliderNormal,
  },
}
</script>
